import React from 'react'
import { connect } from 'dva'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import { Page } from 'components'
import LwjTable from 'components/LwjTable/LwjTable'
import { contractOrderType, productType, contractOrderStatus } from 'utils/enumConfig'
import PayModal from './PayModal'
import GeneralFilter from 'components/Filter/GeneralFilter'
import { Button, Modal } from 'antd';

const table = ({ location, dispatch, contractOrders, loading }) => {
  const {
    items,
    pagination,
    currentItem,
    payModalVisible = false,
    payConfirmModalVisible = false,
    queryParam,
    selectedUnpaid,
    payBatchVisible
  } = contractOrders

  const breadcrumbList = [
    {
      title: '财务管理'
    },
    {
      title: '待缴尾款'
    },
  ]

  /**
   * 定义筛选属性 表单相关
   * @type {{filterItems: *[], onFilterChange(*): void}}
   */
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'contractNum',
        title: '合同号',
        placeholder: '请输入合同号'
      },
      {
        type: 'input',
        id: 'distributorName',
        title: '所属门店',
        placeholder: '请输入所属门店'
      },
    ],
    onFilterChange(value) {
      dispatch({
        type: 'contractOrders/query',
        payload: {
          ...value
        }
      })
    }
  }

  /**
   * 开启待缴的模态框
   * @param record
   */
  const onPay = (record) => {
    dispatch({
      type: 'contractOrders/onShow',
      payload: record
    })
    dispatch({
      type: 'contractOrders/showPayModal',
      payload: {}
    })
  }

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      dispatch({
        type: 'contractOrders/selectedUnpaid',
        payload: {
          selectedRows: selectedRows
        }
      })
    }
  };
  /**
   * Table的Props
   * @type {{dataSource: *, pagination: *, columns: *[]}}
   */
  const tableProps = {
    pageChangeAction: 'contractOrders/query',
    dataSource: items,
    pagination: pagination,
    rowSelection: rowSelection,
    columns: [
      {
        title: '合同号',
        dataIndex: 'contractNum',
        key: 'contractNum',
        width: '20%'
      }, {
        title: '合同类型',
        dataIndex: 'contractOrderType',
        key: 'contractOrderType',
        width: '10%',
        render: (text, record) => (
          <span>
            {contractOrderType[text]}
          </span>
        )
      }, {
        title: '产品类型',
        dataIndex: 'productType',
        key: 'productType',
        width: '10%',
        render: (text, record) => (
          <span>
            {productType[text]}
          </span>
        )
      }, {
        title: '所属门店',
        dataIndex: 'salesDistributorName',
        key: 'salesDistributorName',
        width: '10%',
        render: (text, record) => (record.salesDistributorName)
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: '15%',
        render: (text, record) => (
          <span>
            {contractOrderStatus[text]}
          </span>
        )
      }, {
        title: '合同金额',
        dataIndex: 'orderAmount',
        key: 'orderAmount',
        width: '10%',
        render: (text, record) => (
          <span>
            ¥{text}
          </span>
        ),
      }, {
        title: '已付金额',
        dataIndex: 'payedAmount',
        key: 'payedAmount',
        width: '10%',
        render: (text, record) => (
          <span>
            ¥{text}
          </span>
        ),
      }, {
        title: '欠款',
        dataIndex: 'unpaid',
        key: 'unpaid',
        width: '10%',
        render: (text, record) => (
          <span style={{ color: "red" }}>
            ¥{text}
          </span>
        ),
      }, {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <a onClick={() => onPay(record)}> 缴纳 </a>
          </span>
        ),
        width: '20%'
      }
    ],
    dispatch
  }

  /**
   * 打开待付的Modal
   * @type {{title: string, visible: boolean, toPay: toPay, confirmLoading: boolean, onCancel: onCancel, currentItem: *, destroyOnClose: boolean, width: number, footer: boolean}}
   */
  const payModalProps = {
    title: '待缴尾款',
    visible: payModalVisible,
    toPay: (data) => {
      dispatch({
        type: 'contractOrders/showPayConfirmModal',
        payload: {}
      })
    },
    confirmLoading: false,
    onCancel: () => {
      dispatch({
        type: 'contractOrders/hideModal',
        payload: {}
      })
    },
    currentItem: currentItem,
    destroyOnClose: true,
    width: 1200,
    footer: false,
    payConfirmModalVisible,
    dispatch,
    queryParam
  }
  const showOrHidePayBatch = (option) => {
    dispatch({
      type: 'contractOrders/isShowPayBatchModal',
      payload: option
    })
  }

  return (
    <PageHeaderLayout title='待缴尾款' breadcrumbList={breadcrumbList}>
      <Page inner>
        <GeneralFilter {...filterProps} />
        <Button type="primary" icon="check-square" style={{ marginBottom: '10px' }} onClick={() => showOrHidePayBatch(true)}>
          批量缴纳
        </Button>
        <LwjTable {...tableProps} />
        {payModalVisible && <PayModal {...payModalProps} />}
      </Page>
      <Modal
        title="批量缴纳"
        wrapClassName="vertical-center-modal"
        visible={payBatchVisible}
        onOk={() => {
          dispatch({
            type: "contractOrders/payBatch",
            payload: selectedUnpaid
          })
          showOrHidePayBatch(false)
        }}
        onCancel={() => showOrHidePayBatch(false)}
      >
        <p>是否确认批量缴纳？</p>
      </Modal>
    </PageHeaderLayout>
  )
}

export default connect(({ contractOrders, loading }) => ({ contractOrders, loading }))(table)
